<template>
  <el-dialog
    v-model="dialogTableVisible"
    width="1200"
    :modal="false"
    :before-close="closeDialog"
    :open="openFeeDialog"
    :lock-scroll="false"
    :default-active="'1'"
  >
    <template #header>
      <el-menu
        ellipsis
        class="el-menu-popper-demo"
        mode="horizontal"
        :popper-offset="20"
        style="max-width: 800px"
        :default-active="activeIndex"
        @select="selectMenu"
      >
        <el-menu-item index="1">日常维护流程审批</el-menu-item>
        <el-menu-item index="2">管道修复流程审批</el-menu-item>
        <el-menu-item index="3">清淤工程流程审批</el-menu-item>
        <el-menu-item index="4">违法处置流程审批</el-menu-item>
      </el-menu>
    </template>
    <clear v-if="selectTask.cleartask"></clear>
    <dailyMaintenance v-if="selectTask.dailytask"></dailyMaintenance>
    <fixForm v-if="selectTask.fixtask"></fixForm>
    <illegalForm v-if="selectTask.illegaltask"></illegalForm>
  </el-dialog>
</template>

<script setup>
import { reactive } from "vue";
import clear from "./clear.vue";
import dailyMaintenance from "./dailyMaintenance.vue";
import fixForm from "./fixForm.vue";
import illegalForm from "./illegalForm.vue";

// 自定义父组件刷新
const emits = defineEmits(["RefreshFee"]);
const RefreshFee = () => {
  emits("RefreshFee");
};

let activeIndex = ref("1");
let dialogTableVisible = true;

let selectTask = reactive({
  cleartask: false,
  dailytask: true,
  fixtask: false,
  illegaltask: false,
});

// 初始化所有的task变为false
function initselectTask() {
  for (const item of Object.keys(selectTask)) {
    selectTask[item] = false;
  }
}

function selectMenu(value) {
  initselectTask();
  if (value == "1") {
    selectTask.dailytask = true;
  }
  if (value == "2") {
    selectTask.fixtask = true;
  }
  if (value == "3") {
    selectTask.cleartask = true;
  }
  if (value == "4") {
    selectTask.illegaltask = true;
  }
}

function closeDialog() {
  RefreshFee();
}
</script>
